<template>
    <div class="main">
        <van-steps :active="active">
            <van-step>成功下单</van-step>
            <van-step>等待支付</van-step>
            <van-step>交易完成</van-step>
        </van-steps>
        <div class="payment">
            <img class="wechatPay" src="@/assets/weChatPay.png"/>
            <van-button type="info" @click="$router.go(-1)">稍后支付</van-button>

            <van-button @click="pay" type="primary">支付成功</van-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Payment",
        data() {
            return {
                active: 1,
                payData: {
                    order_sn: "",
                    amount: ""
                }
            };
        },
        methods: {
            pay() {
                this.$http.post("/order/payment", this.payData).then((res) => {
                    if (res.data.code == 0) {
                        this.$msg.success("支付成功");
                        this.$router.push("/");
                    }
                })
            }
        },
        mounted() {
            const order = JSON.parse(this.$route.query.order)
            this.payData.order_sn = order.order_sn;
            this.payData.amount = order.pay_amount;
        }
    }
</script>

<style lang="less" scoped>
    .main {
        background: white;
    }

    .payment {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        img {
            width: 90%;
            margin: 1.39vw 0;
        }

        button {
            border-radius: 10px;
        }
    }
</style>